<template>
  <div class="container">
    <!-- 卡片区域 -->
    <el-card>
      <!-- 新增按钮 -->
      <el-row type="flex" justify="end">
        <el-button type="success" icon="el-icon-edit" @click="addQuestion"
          >新增试题</el-button
        >
      </el-row>
      <!-- 选择框 -->
      <el-form :model="formData" label-width="80px" :inline="true">
        <el-form-item label="学科">
          <el-select
            placeholder="请选择"
            v-model="formData.label"
            @focus="getSubjectList"
            @change="getId"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select
            @focus="getSubjectDetail(subjectID)"
            v-model="formData.twoCatalogue"
          >
            <el-option
              v-for="item in sujectDetail"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select @focus="getTagsList(subjectID)" v-model="formData.tags">
            <el-option
              v-for="item in tagsList"
              :key="item.value"
              :label="item.tagName"
              :value="item.tagName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="formData.keywords" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select @focus="getQuestionType" v-model="formData.questionType">
            <el-option
              v-for="item in questionTypeList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select
            placeholder="请选择"
            @focus="getDifficult"
            v-model="formData.difficulty"
          >
            <el-option
              v-for="item in difficultyList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select
            placeholder="请选择"
            @focus="getDirection"
            v-model="formData.direction"
          >
            <el-option
              v-for="(item, index) in directionList"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select @focus="getUserList" v-model="formData.user">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :value="item.username"
              :label="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input v-model="formData.topicNotes"></el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="formData.enterpriseAbbreviation"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <div class="d-flex flex-grow-1">
            <el-select
              placeholder="请选择"
              style="width: 100px"
              @focus="getCityData"
              @change="handleProvince"
              v-model="formData.province"
            >
              <el-option
                v-for="item in citySelect.province"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              v-model="formData.city"
              placeholder="请选择"
              style="width: 100px"
            >
              <el-option
                v-for="item in citySelect.cityDate"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="choose(subjectID)"
              >确定</el-button
            >
          </el-row>
        </el-form-item>
      </el-form>
      <!-- 消息提示 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon> </el-alert>

      <!-- 列表区域 -->
      <el-table :data="questionList" style="width: 100%">
        <el-table-column label="试题编号" prop="number"></el-table-column>
        <el-table-column label="学科" prop="subject"></el-table-column>
        <el-table-column label="目录" prop="catalog"></el-table-column>
        <el-table-column label="题型" prop="questionType">
          <template slot-scope="{ row }">
            {{ row.questionType | changeQuestionType }}
          </template>
        </el-table-column>
        <el-table-column label="题干" prop="question" width="280">
          <template slot-scope="{ row }">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate" width="280">
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="难度" prop="difficulty">
          <template slot-scope="{ row }">
            {{ row.difficulty | changeDifficulty }}
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="{ row }">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-view"
              @click="getListId(row.id)"
              circle
            ></el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="editQuestion(row.id)"
              circle
            ></el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-check"
              @click="add(row)"
              circle
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="remove(row)"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(pagination.page)"
          :total="Number(total)"
          :page-size="Number(pagination.pagesize)"
          :page-sizes="[2, 3, 5, 10]"
          layout="sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-row>
    </el-card>

    <!-- 预览弹层 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="45%">
      <el-row style="height: 30px; width: 100%">
        <el-col :span="6"
          >【题型】:{{ detailList.questionType | changeQuestionType }}</el-col
        >
        <el-col :span="6"> 【编号】:{{ detailList.id }} </el-col>
        <el-col :span="6"
          >【难度】:{{ detailList.difficulty | changeDifficulty }}</el-col
        >
        <el-col :span="6"> 【标签】:{{ detailList.tags }} </el-col>
      </el-row>
      <el-row style="height: 30px; width: 100%">
        <el-col :span="6"> 【学科】:{{ detailList.subjectName }} </el-col>
        <el-col :span="6"> 【目录】:{{ detailList.directoryName }} </el-col>
        <el-col :span="6"> 【方向】:{{ detailList.direction }} </el-col>
      </el-row>
      <hr />
      <el-row style="height: 30px; width: 100%" v-model="detailList">
        【题干】:
      </el-row>
      <el-row v-model="detailList"
        ><span v-html="detailList.question"></span
      ></el-row>
      <el-row v-model="detailList"
        >{{ detailList.questionType | changeQuestionType }}题
        选项:(以下选中的选项为正确答案)</el-row
      >
      <el-row style="height: 100px; width: 100%" v-model="detailList">
        <div class="radio" v-if="detailList.questionType === '1'">
          <el-radio
            v-for="opt in detailList.options"
            :key="opt.id"
            :label="opt.isRight"
            :value="1"
            style="margin-top: 10px"
            >{{ opt.title }}</el-radio
          >
        </div>
        <div class="radio" v-else-if="detailList.questionType === '2'">
          <el-checkbox
            v-for="opt in detailList.options"
            :key="opt.id"
            :true-label="opt.isRight"
            :value="1"
            >{{ opt.title }}</el-checkbox
          >
        </div>
      </el-row>
      <hr />
      <el-row v-model="detailList">
        【参考答案】
        <el-button style="margin-bottom: 10px" type="danger" @click="change"
          >视频答案解析</el-button
        >

        <video
          autoplay
          controls
          :src="detailList.videoURL"
          height="200px"
          style="display: block"
          v-if="video"
        ></video>
      </el-row>
      <hr />
      <el-row v-model="detailList" style="margin: 20px 0">
        【答案解析】{{ detailList.answerID ? detailList.answerID : "无" }}
      </el-row>
      <hr />
      <el-row v-model="detailList" style="margin: 20px 0">
        【题目备注】{{ detailList.remarks }}
      </el-row>
      <el-row slot="footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions.js'
import { list as tagsList } from '@/api/hmmm/tags'
import { simple as userList } from '@/api/base/users.js'
import { simple as directoryslist } from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
export default {
  name: '',
  props: {},
  data () {
    return {
      // 表单数据
      formData: {
        subject: '', // 学科
        twoCatalogue: '', // 二级目录
        tags: '', // 标签
        keywords: '', // 关键字
        questionType: '', // 试题类型
        user: '', // 用户
        difficulty: '', // 试题难度
        direction: '', // 方向
        topicNotes: '', // 题目备注
        enterpriseAbbreviation: '', // 企业简称
        province: '', // 省
        city: '' // 市
      },
      subjectList: [], // 学科名称
      sujectDetail: [], // 学科详情
      tagsList: [], // 标签列表
      questionTypeList: [], // 试题类型列表
      difficultyList: [], // 试题难度列表
      directionList: [], // 方向列表
      userList: [], // 用户列表
      // 城市列表
      citySelect: {
        province: '',
        cityDate: ''
      },
      subjectID: '', // 学科id
      dialogVisible: false, // 预览弹层
      questionList: [], // 题库列表
      detailList: [
      ], // 获取详情列表
      isRight: '',
      pagination: {
        page: 1,
        pagesize: 2
      },
      total: 0,
      video: false // 显示视频
    }
  },
  created () {
    this.getQuestionList()
    // this.choose()
  },
  filters: {
    changeQuestionType (val) {
      const f = questionType.find(t => t.value === +val)
      return f ? f.label : '未知'
    },
    changeDifficulty (val) {
      const f = difficulty.find(t => t.value === +val)
      return f ? f.label : '未知'
    }
  },
  methods: {
    // 新增试题
    addQuestion () {
      this.$router.push('/questions/new')
    },
    // 筛选
    async choose (id) {
      // console.log(formData)
      // 调用获取列表函数
      console.log(this.formData)
      const { data, data: { items } } = await list({ subjectID: id })
      this.questionList = items
      this.total = data.counts
      console.log(items)
    },
    // 清除
    clear () {
      this.formData = {}
    },
    // 获取方向
    getDirection () {
      this.directionList = direction
    },
    // 获取试题难度
    getDifficult () {
      this.difficultyList = difficulty
    },
    // 获取试题类型
    getQuestionType () {
      this.questionTypeList = questionType
    },
    // 获取学科列表
    async getSubjectList () {
      const { data } = await simple()
      console.log(data)
      this.subjectList = data
    },
    getId (id) {
      this.subjectID = id
    },
    // 获取学科详情
    async getSubjectDetail (subjectID) {
      const { data } = await directoryslist({ subjectID: subjectID })
      // console.log(data)
      this.sujectDetail = data
    },

    // 获取省
    async getCityData () {
      const data = await provinces()
      this.citySelect.province = data
      // console.log(this.citySelect.province)
    },
    // 选省获取到市
    handleProvince (e) {
      this.citySelect.cityDate = citys(e)
      this.formData.city = this.citySelect.cityDate[0]
    },
    // 获取题库列表
    async getQuestionList (params) {
      const { data, data: { items } } = await list(this.pagination)
      this.questionList = items
      this.total = data.counts
      console.log(this.questionList)
      console.log(data)
    },
    // 删除
    remove (row) {
      console.log(row)
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        await choiceAdd(row)
        this.getQuestionList()
      })
    },
    // 标签列表
    async getTagsList (subjectID) {
      const { data: { items } } = await tagsList({ subjectID: subjectID })
      // console.log(items)
      this.tagsList = items
    },
    // 预览按钮
    async getListId (id) {
      this.dialogVisible = true
      // console.log(id)
      const { data } = await detail({ id: id })
      console.log(data)
      this.detailList = data
      this.video = false
    },
    // 获取用户列表
    async getUserList () {
      const { data } = await userList()
      // console.log(data)
      this.userList = data
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.pagination.pagesize = val
      if (this.pagination.page === 1) {
        this.getQuestionList(this.pagination)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.pagination.page = val
      this.getQuestionList()
    },
    // 跳转
    change () {
      this.video = true
    },
    // 修改
    editQuestion (id) {
      console.log(id)
      this.$router.push({ path: '/questions/new?id=' + id })
    },
    // 加入精选题库
    add (row) {
      console.log(row)
      this.$confirm('是否确认加入精选题库？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        row.choiceState = 1
        await choiceAdd(row)
        this.$router.push({ path: '/questions/choice' })
        this.getQuestionList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.radio {
  display: flex;
  flex-direction: column;
}
.d-flex > .el-select:not(:last-child) {
  margin-right: 10px;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item__label {
  font-weight: bold;
}
.el-select {
  width: 100%;
}
.el-form--inline .el-form-item {
  display: flex;
  flex: 25%;
  margin-right: 0px;
}
.el-input__inner {
  padding: 0 30px;
}
.el-form-item__content {
  flex: 1;
}
.el-row--flex.is-justify-end {
  margin-left: 150px;
}
</style>
